<!DOCTYPE html>
<html>
<@h.head />
<style type="text/css">
@media screen and (min-width:1024px){
	.displayimg0 {
		display: '';
	}
	.displayimg1 {
		display: none;
	}
}
@media screen and (max-width:1023px){
	.displayimg0 {
		display: none;
	}
	.displayimg1 {
		display: '';
	}
}
</style>
<body class="homepage">
	<@h.nav />
	<div class="h84"></div>
	<#if (brand)??>
	<#if (videoPath)??>
	<video id="video" width="100%" height="100%" onmouseenter="this.controls='controls'" onmouseout="this.controls=''">
    	<source src="${(videoPath)!}">
    	你的浏览器不支持video播放，推荐使用google chrome浏览器
    </video>
    </#if>
    <#if (imgOne)??>
    <img src="${(imgOne)!}" class="displayimg${(brand.isMbOne)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgTwo)??>
    <img src="${(imgTwo)!}" class="displayimg${(brand.isMbTwo)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgThree)??>
    <img src="${(imgThree)!}" class="displayimg${(brand.isMbThree)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgFour)??>
    <img src="${(imgFour)!}" class="displayimg${(brand.isMbFour)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgFive)??>
    <img src="${(imgFive)!}" class="displayimg${(brand.isMbFive)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgSix)??>
    <img src="${(imgSix)!}" class="displayimg${(brand.isMbSix)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgSeven)??>
    <img src="${(imgSeven)!}" class="displayimg${(brand.isMbSeven)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgEight)??>
    <img src="${(imgEight)!}" class="displayimg${(brand.isMbEight)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgNine)??>
    <img src="${(imgNine)!}" class="displayimg${(brand.isMbNine)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgTen)??>
    <img src="${(imgTen)!}" class="displayimg${(brand.isMbTen)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgEleven)??>
    <img src="${(imgEleven)!}" class="displayimg${(brand.isMbEleven)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgTwelve)??>
    <img src="${(imgTwelve)!}" class="displayimg${(brand.isMbTwelve)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgThirteen)??>
    <img src="${(imgThirteen)!}" class="displayimg${(brand.isMbThirteen)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgFourteen)??>
    <img src="${(imgFourteen)!}" class="displayimg${(brand.isMbFourteen)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgFifteen)??>
    <img src="${(imgFifteen)!}" class="displayimg${(brand.isMbFifteen)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgSixteen)??>
    <img src="${(imgSixteen)!}" class="displayimg${(brand.isMbSixteen)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgSeventeen)??>
    <img src="${(imgSeventeen)!}" class="displayimg${(brand.isMbSeventeen)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgEighteen)??>
    <img src="${(imgEighteen)!}" class="displayimg${(brand.isMbEighteen)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgNineteen)??>
    <img src="${(imgNineteen)!}" class="displayimg${(brand.isMbNineteen)!'0'}" width="100%" height="100%">
    </#if>
    <#if (imgTwenty)??>
    <img src="${(imgTwenty)!}" class="displayimg${(brand.isMbTwenty)!'0'}" width="100%" height="100%">
    </#if>
    <section class="no-margin">
        <div class="container">
			<div class="center wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
				<h2>&nbsp;</h2>
				<h2>${(brand.name)!}</h2>
				<p class="lead">${(brand.content)!}</p>
			</div>
		</div><!--/.container-->
    </section>
    <#if (otherBrand)??>
    <section id="feature" class="transparent-bg no-margin">
        <div class="container">
            <div class="row">
            	<#list otherBrand as record>
            		<div class="col-md-3 wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
                    <div class="clients-comments text-center">
                    	<a href="${path}/brand/${(record.id)!}">
                        	<img src="${(record.path)!}" class="img-circle" alt="">
                        </a>
                        <h3 title="${(record.content)!}">
                        	<#if record.content?? && (record.content?length gt 60)>
								${(record.content[0..60?number])!}...
							<#else>
								${(record.content)!}
							</#if>
						</h3>
                        <h4><span>${(record.name)!}</span></h4>
                    </div>
                	</div>
            	</#list>
           </div>
        </div><!--/.container-->
    </section>
    </#if>
    </#if>
	<@h.foot />
</body>
<script type="text/javascript">
$(function(){
	if(!isMobile.any()) {
    	$("video").attr("autoplay","autoplay");
    }
});
</script>
</html>